<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<Avatar :src="src" :width='150' fit="fill" ></Avatar>

			<!--视频地址-->
			<video v-show="videosrc" width="300" height="220" :src="videosrc" controls="controls" autoplay="autoplay" muted >
				
			</video>

			<table>
					<tr >
						<td style="padding:5px;">
							
							密码:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="password" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							确认密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password1" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							头像上传:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload" />

						</td>
					</tr>


					<tr>
						<td style="padding:5px;">
							
							七牛云上传:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload_qiniu" />

						</td>
					</tr>


					<tr>
						<td style="padding:5px;">
							
							进度展示:

						</td>
						<td style="padding:5px;">
							
							{{ loadpercent }}

							<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="blue"><span slot="title"></span><span slot="text">{{ loadpercent_int }}%</span></Progress>

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">提交</Button> &nbsp;&nbsp;

						</td>
					</tr>

			</table>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
      password:'',
      password1:'',
      src:'',
      //七牛上传凭证
      uptoken:'',
      //视频地址
      videosrc:'',
      //上传进度
      loadpercent:'',
      //整型
      loadpercent_int:0
    }
  },
  //注册组件标签
  components:{
  		'myheader':myheader
  },
  mounted:function(){

  	//获取用户信息

  	//发送请求
	this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem("uid")}}).then((result) =>{

					console.log(result);
			//视频地址
  			this.videosrc = 'http://q79iaccra.bkt.clouddn.com/'+result.data.img;

		});

	//获取uptoken
	this.get_uptoken();   
  
},
  methods:{

  	//提交
  	submit:function(){


  	},
  	//获取七牛云凭证
  	get_uptoken(){

  		this.axios.get('http://localhost:8000/uptoken/').then((result) =>{

  						console.log(result);
  						this.uptoken = result.data.token;

  		});

  	},
  	//上传七牛
  	upload_qiniu:function(e){


  		console.log(this.uptoken);

  		//获取文件对象
  		let file = e.target.files[0];

  		//声明参数
  		let param = new FormData();

  		//将上传凭证添加参数
  		param.append('token',this.uptoken);

  		//附加文件
  		param.append('file',file);

  		//定制化axios
  		const axios_qiniu = this.axios.create({withCredentials:false});

  		//发送请求
  		axios_qiniu({
  			method:'POST',
  			url:'http://up-z1.qiniu.com/',
  			data:param,
  			timeout:30000,
  			//设置上传进度
  			onUploadProgress:(e) => {

  				//设置总进度对象  已上传字节数 / 总字节数
  				var complete = (e.loaded / e.total);

  				//安慰剂按钮
  				if(complete < 1){
  					this.loadpercent = (complete * 100).toFixed(2) + "%";

  					this.loadpercent_int = parseInt((complete * 100).toFixed(2));
  				}

  			}
  		}).then(result =>{

  			console.log(result);

  			//赋值
  			this.src = 'http://q79iaccra.bkt.clouddn.com/'+result.data.key;

  			//视频地址
  			this.videosrc = 'http://q79iaccra.bkt.clouddn.com/'+result.data.key;

  			//修改视频地址
  			//发送请求
  		this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem("uid"),img:result.data.key}}).then((result) =>{

  						console.log(result);
				});

  			//上传成功后，强行100%
  			this.loadpercent = '100%';
  			this.loadpercent_int = 100;

  		});

  	},
  	//提交
  	upload:function(e){

  		//获取文件对象
  		let file = e.target.files[0];

  		//声明参数
  		let param = new FormData();

  		//添加文件
  		param.append('file',file,file.name);

  		//声明请求头
  		let config = {headers:{'Content-Type':'multipart/form-data'}};

  		//发送请求
  		this.axios.post('http://localhost:8000/uploadfile/',param,config).then((result) =>{

  						console.log(result);

  						//赋值操纵
  						this.src = 'http://localhost:8000/static/upload/' + result.data.filename;

  		});

  	}

     
  }
}


</script>
 
<style>



</style>